<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录 · 语雀</title>
        <link type="image/png" href="https://gw.alipayobjects.com/zos/rmsportal/UTjFYEzMSYVwzxIGVhMu.png" rel="shortcut icon">
        <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .wrapper{
                width: 100%;
                height: 100%;
                position: relative;
            }
            .box-out{
                position: relative;
                padding-top: 94px;
                margin: 0 auto;
                width: 400px;
                height: 100%;
            }
            .box-in{
                padding: 40px 8px 16px;
                border:1px solid #e9e9e9;
                border-radius: 4px;
                position: relative;
                width: 100%;
                height: 100%;
            }
            .logo{
                margin: 0 31px;
                padding-bottom: 20px;
                box-sizing: border-box;
                height: 84px;
                position: relative;
                text-align: center;
            }
            .logo img{
                width: 64px;
                height: 64px;
                margin: 0 auto;
            }
            .content{
                width: 320px;
                height: 100%;
                margin: 0 auto;
                font-size: 14px;
                position: relative;
            }
            .title{
                text-align: center;
                position: relative;
                margin-bottom: 32px;
                overflow: hidden;
            }
            .content-title{
                font-size: 32px;
                line-height: 1.2;
                color: #262626;
            }
            h2{
                margin-bottom: 0;
                margin-top: 0;
                font-weight: 500;
            }
            .content-text{
                color: #595959;
                margin-top: 8px;
                font-size: 18px;
                margin-bottom: 0;
            }
            .register{
                width: 320px;
                height: 100%;
                margin: 0 auto;
                position: relative;
            }
            .register form{
                list-style: none;
                text-align: center;
            }
            .phone-number{
                width: 320px;
                height: 40px;
                line-height: 40px;
                overflow: hidden;
                margin-bottom: 16px;
            }
            .phone86{
                width: 88px;
                box-sizing: border-box;
                height: 40px;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
                border: 1px solid #d9d9d9;
                cursor: pointer;
                float: left;
            }
            .phone86:hover{
                border: 1px solid #25B864;
            }
            .phone86-left{
                position: relative;
                width: 30px;
                height: 40px;
                float: left;
                margin-left: 5px;
            }
            .phone86-right{
                color: #d9d9d9;
            }

            .input-text{
                width: 232px;
                box-sizing: border-box;
                height: 40px;
                border: 1px solid #d9d9d9;
                border-top-right-radius: 4px;
                border-bottom-right-radius: 4px;
                padding: 6px 11px;
                text-align: left;
                font-size: 16px;
                outline: none;
            }
            .input-text:hover{
                border: 1px solid #25B864;
            }
            .v-code{
                position: relative;
                box-sizing: border-box;
                width: 320px;
                height: 56px;
                margin-bottom: 8px;
            }
            .v-code-input{
                float: left;
                height: 40px;
                width: 188px;
                box-sizing: border-box;
                border: 1px solid #d9d9d9;
                border-radius: 4px;
                padding: 6px 11px;
                text-align: left;
                font-size: 16px;
            }
            .v-code-input:hover{
                border:1px solid #25B864;
            }
            .v-code-receive{
                width: 124px;
                height: 40px;
                box-sizing: border-box;
                float: right;

            }
            .v-code-receive button{
                border: 1px solid #d9d9d9;
                width: 100%;
                padding: 0 12px;
                height: 40px;
                box-shadow: none;
                text-shadow: none;
                background: rgba(0,0,0,0)!important;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
                color:#595959;
            }
            .fast-reg{
                width: 320px;
                height: 100%;
            }
            .fast-reg-btn{
                box-sizing: border-box;
                width: 100%;
                height:40px ;
                padding: 0 12px;
                color: #fff;
                background: #25b864!important;
                border-radius: 4px;
                text-align: center;
                text-shadow: none;
                box-shadow: none;
                cursor: pointer;
                font-size: 14px;
                border: 1px solid #e9e9e9;
            }
            .agreement{
                width: 320px;
                height: 100%;
                text-align: center;
                color: #8c8c8c;
            }
            .agreement a{
                text-decoration: none;
                color: #096dd9;
            }
            .login-img{
                width: 295px;
                height: 100%;
                margin: 0 auto;
                justify-content: center;
                text-align: center;
            }
            .login-img a{
                margin-right: 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .login-img-a{
                width: 28px;
                height: 29px;
                display: inline-block;
                background-image: url("login-img.png");
                background-size: 100%;
                background-repeat: no-repeat;
                cursor: pointer;
            }
            .dingtalk{
                background-position: 0 -28.7px;
            }
            .wechat{
                background-position: 0 -59.5px;
            }
            .Tb{
                display: inline-block;
                width: 28px;
                height: 29px;
                background-image: url("Tb.svg");
                background-size: 100%;
                background-repeat: no-repeat;
            }
            .bottom-content{
                width: 320px;
                margin: 0 auto;
                height: 100%;
                margin-top: 26px;
                text-align: center;
            }
            .bottom-content a{
                text-decoration: none;
                color: #096dd9;
            }
            .foot-span{
                display: inline-block;
                width: 1px;
                height: 14px;
                color: #e8e8e8;
                margin: 0 8px 3px;
            }

        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box-out"><!- 外圈的盒子  -->
                <div class="box-in"><!- 内圈的盒子-->

                    <div class="logo">
                        <a href="https://yuque.com/">
                            <img src="logo.png" alt="语雀">
                        </a>
                    </div>

                    <div class="content">

                        <div class="title">
                            <h2 class="content-title">
                                <span>语雀</span>
                            </h2>
                            <p class="content-text">
                                <span>专业的云端知识库</span>
                            </p>
                        </div>

                        <div class="register">
                            <form>

                                <div class="phone-number">

                                    <div class="phone86">
                                        <div class="phone86-left">+86</div>
                                        <span class="phone86-right">
                                            <i class="fa fa-angle-down"></i>
                                        </span>
                                    </div>
                                    <input class="input-text" type="text" autocomplete="off" placeholder="手机号">
                                </div>

                                <div class="v-code">
                                    <input class="v-code-input" type="text" autocomplete="off" placeholder="6位短信验证码">
                                    <div class="v-code-receive">
                                        <button type="button">
                                            <span>获取短信验证码</span>
                                        </button>
                                    </div>
                                </div>

                                <div class="fast-reg">
                                    <button class="fast-reg-btn" type="submit">
                                        <span>快速注册</span>
                                    </button>
                                </div>

                            </form>
                            <p class="agreement">
                                注册即表明同意
                                <a href="https://www.yuque.com/terms" target="_blank">《语雀服务协议》</a>
                            </p>

                            <div class="login-img">
                                <a class=" login-img-a dingtalk"></a>
                                <a class="login-img-a"></a>
                                <a class="login-img-a wechat"></a>
                                <a class="Tb"></a>
                            </div>

                            <div class="bottom-content">
                                <a href="https://www.yuque.com/login" target="_blank">直接登录</a>
                                <span class="foot-span">|</span>
                                <a href="https://www.yuque.com/yuque/help/sms-issue" target="_blank">遇到问题</a>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        
    </body>
</html>